<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="description" content="IT技术课程网站">
		<meta name="keywords" content="IT技术课程网站">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<link rel="icon" href="images/favicon.ico" type="image/x-icon">
		<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
		<title>用户信息管理</title>
		<!-- 第一种方式:<base> 标签为页面上的所有链接规定默认地址或默认目标 -->
		<base th:href="@{/}">
		<!--[if lt IE 9]>
		<script src="js/html5shiv.min.js"></script>
		<script src="js/respond.min.js"></script>
		<![endif]-->
		<link rel="stylesheet" type="text/css" href="css/bootstrap3.min.css">
		<link rel="stylesheet" type="text/css" href="css/flat-ui.css" />
		<link rel="stylesheet" type="text/css" href="css/userInfo.css" />
		<style>
			body {
        }
    </style>
	</head>

	<body>
		<nav class="navbar navbar-inverse navbar-lg navbar-expand-lg" role="navigation">
			<a class="navbar-brand" href="indexMain.html">
				<img src="images/ITx32.png" style="width: auto;height: 25px;">
			</a>
			<a class="navbar-brand" style="padding-left: 0;" href="indexMain.html">IT技术课程网站</a>
<!--			<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-collapse-01"></button>-->
			<div class="collapse navbar-collapse" id="navbar-collapse-01">
				<ul class="nav navbar-nav mr-auto">
					<li><a href="indexMain.html">首页</a></li>
					<li><a href="videoMain.html">视频课程</a></li>
					<li><a href="blogMain.html">博客文章</a></li>
					<li class="active"><a>用户信息</a></li>
				</ul>
				<ul class="nav navbar-nav navbar-right mr-auto">
					<li><a href="login/userLoginOut">退出登陆</a></li>
				</ul>
				<form class="navbar-form form-inline my-2 my-lg-0" action="searchInputBlog" role="search" style="margin: 0px;">
					<div class="form-group" style="margin-left: 20px;">
						<div class="input-group">
							<input class="form-control" id="navbarInput-01" name="searchText" style="width: 250px;" type="search" placeholder="输入搜索博客" required>
							<span class="input-group-btn">
								<button type="submit" class="btn"><span class="fui-search"></span></button>
							</span>
						</div>
					</div>
				</form>
			</div><!-- /.navbar-collapse -->
		</nav><!-- /navbar -->

		<!-- container -->
		<div class="container" style="width: 90%">
			<!-- 用户信息 -->
			<div class="row">
				<div class="leftMenu col-lg-2 col-md-2 col-sm-2">
					<div class="meun-item meun-item-active" href="#userblog" aria-controls="userblog" role="tab" data-toggle="tab">我的博客</div>
					<div class="meun-item" href="#usercourses" aria-controls="usercourses" role="tab" data-toggle="tab">我的课程</div>
					<div class="meun-item" href="#userorder" aria-controls="userorder" role="tab" data-toggle="tab">我的订单</div>
					<div class="meun-item" href="#userchange" aria-controls="userchange" role="tab" data-toggle="tab">修改信息</div>
				</div>
				<div class="rightMenu col-lg-10 col-md-10 col-sm-10">
					<!-- Tab panes -->
					<ul class="tab-content">
						<!--我的博客开始-->
						<li class="tab-pane active" id="userblog" role="tabpanel">
							<div class="row">
								<div class="col-sm-8 col-md-8 col-lg-8 col-sm-offset-2">
									<a href="blogWrite"><button class="btn btn-info btn-newblog">新建博客</button></a>
									<hr>
									<div class="row">
										<div class="col-sm-8 col-md-6" th:if="${#lists.isEmpty(blogList)}">
											<h4 style="color: #fff">您还没有发表过博客</h4>
										</div>
									</div>
									<div th:each="blogList:${blogList}" class="tile blog-item">
										<a th:href="@{blogDetail?b_id={id}(id=${blogList.id})}">
											<input type="hidden" class="hidden_blog_id" th:value="${blogList.id}">
											<h5 th:text="${blogList.btitle}" class="blog-title">博客标题</h5>
											<p class="blog-desc" th:text="${blogList.bdesc}">博客简介</p>
											<hr style="border-color: #aaa;">
											<span th:text="${blogList.username}">作者</span>
											<span th:text="${#dates.format(blogList.btime, 'yyyy-MM-dd')}">发布时间</span>
											<span style="margin-left: 10px">博客分类:</span>
											<span th:text="${blogList.btypename}">分类名称</span>
										</a>
										<span class="a-blogchange" style="margin-left: 10px"><a th:href="@{blogChange?b_id={id}(id=${blogList.id})}">修改</a></span>
										<span class="a-blogchange" style="margin-left: 10px"><a href="#fakelink" class="btn_deleteBlog" data-toggle="modal" data-target="#deleteBlog">删除</a></span>
									</div>
								</div>
							</div>
						</li>
						<!--删除博客提示框-->
						<div class="modal fade" id="deleteBlog" role="dialog" aria-labelledby="gridSystemModalLabel">
							<div class="modal-dialog" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
										<h4 class="modal-title">提示</h4>
									</div>
									<div class="modal-body">
										<div class="form-group">
											<label for="deleteBlog_title" class="col-xs-3 control-label">博客：</label>
											<div class="col-xs-9">
												<label id="deleteBlog_title"></label>
												<input type="hidden" id="deleteBlog_id"/>
											</div>
										</div>
										<div class="container-fluid">
											确定要删除该博客？删除后不可恢复！
										</div>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-white" data-dismiss="modal">取 消</button>
										<button type="button" class="btn btn-danger" id="btn_deleteBlog_save">保 存</button>
									</div>
								</div>
								<!-- /.modal-content -->
							</div>
							<!-- /.modal-dialog -->
						</div>
						<!-- /.modal -->


						<!--我的博客结束-->
						<!--我的课程开始-->
						<li class="tab-pane" id="usercourses" role="tabpanel">
							<div class="row">
								<div class="col-sm-8 col-md-6" th:if="${#lists.isEmpty(videoList)}">
									<h4 style="color: #fff">您还没有购买过课程</h4>
								</div>
								<div th:each="videoList:${videoList}" class="col-sm-6 col-md-3">
									<div class="thumbnail">
										<a th:href="@{videoDetail?v_id={id}(id=${videoList.id})}">
											<img th:src="${videoList.vcoverurl}" alt="视频封面图片">
											<div class="caption">
												<h6><a th:text="${videoList.vtitle}">视频标题</a></h6>
												<span>￥</span><span th:text="${videoList.vprice}">视频价格</span>
											</div>
										</a>
									</div>
								</div>
							</div>
						</li>
						<!--我的课程结束-->
						<!--订单开始-->
						<li class="tab-pane" id="userorder" role="tabpanel">
							<div class="row">
								<div class="col-sm-8 col-md-6" th:if="${#lists.isEmpty(orderList)}">
									<h4 style="color: #fff">您还没有支付的订单</h4>
								</div>
								<div th:each="orderList:${orderList}" class="col-sm-8 col-md-8 col-lg-8 col-sm-offset-2">
									<div class="tile order-item">
										<h5 class="order-title">购买课程：<span><a th:text="${orderList.vtitle}" th:href="@{videoDetail?v_id={v_id}(v_id=${orderList.v_id})}">视频标题</a></span></h5>
										<span>用户：</span><span th:text="${orderList.username}">用户名</span>
										<span style="margin-left: 10px">支付金额：￥</span><span th:text="${orderList.vprice}">视频价格</span>
										<span style="margin-left: 10px">购买时间：</span><span th:text="${#dates.format(orderList.otime, 'yyyy-MM-dd')}">时间</span>
									</div>
								</div>
							</div>
						</li>
						<!--订单结束-->
						<!--修改信息开始-->
						<li class="tab-pane" id="userchange" role="tabpanel">
							<div class="row">
								<div class="col-sm-6 col-md-6 col-lg-4 col-sm-offset-3 col-md-offset-3 col-lg-offset-4">
									<form class="form-userchange">
										<div class="row">
											<div class="col-lg-12" style="margin:0px;padding: 0px;text-align: center;">
												<h3 style="color:#fff;margin-top:5px;">修改信息</h3>
											</div>
										</div>
										<div class="form-group">
											<label for="usernameInput">用户名</label>
											<input type="text" class="form-control" id="usernameInput" name="usernameInput" placeholder="请输入用户名"
											 required="required">
											<p id="help_username" class="help-block">用户名格式提示文字</p>
										</div>
										<div class="form-group">
											<label for="passwordInput">密&ensp;&ensp;码</label>
											<input type="password" class="form-control" id="passwordInput" name="passwordInput" placeholder="请输入密码"
											 required="required">
											<p id="help_password" class="help-block">密码格式提示文字</p>
										</div>
										<hr>
										<div class="form-group">
											<input type="hidden" th:value="${session.Account.id}" id="changeUser_id">
											<button type="button" id="btn_userchange" class="btn btn-success" style="width: 120px;">修改</button>
										</div>
									</form>
								</div>
							</div>
						</li>
						<!--修改信息结束-->
					</ul>
				</div>
			</div>
			<!-- 用户信息 -->
		</div>
		<!-- /container -->

		<!-- 底部信息 -->
		<footer class="footer">
			<div class="footer-title">
				About the website
			</div>
			<hr>
			<div class="footer-content">
				<ul>
					<li><span>@Author: </span><span><a href="#fakelink">renexton@163.com</a></span></li>
					<li><span>Copyright &copy;2020 </span><span><a href="#fakelink">WSS-Studio</a></span></li>
				</ul>
			</div>
		</footer>


		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/bootstrap.min.js"></script>

		<script>
			$(function() {
				//tab菜单点击样式
				$(".meun-item").click(function() {
					$(".meun-item").removeClass("meun-item-active");
					$(this).addClass("meun-item-active");
				});

				//定义用户名密码正则
				var patternUsername = /^[A-Za-z0-9_\u4e00-\u9fa5]{2,10}$/;
				var patternPassword = /^[A-Za-z0-9_]{5,12}$/;
				//表单提交前的验证参数
				var usernameInputOK = false;
				var passwordInputOK = false;

				$("#usernameInput").focus().select();
				//监听输入框内容变化
				$("#usernameInput").bind("input propertychange change blur", function(){
					var username = $("#usernameInput").val().trim();
					// console.log(patternUsername.test(username));
					if (username == "") {
						$("#help_username").text("用户名不能为空");
						$("#help_username").parent().removeClass("has-success").addClass("has-error");
						usernameInputOK = false;
					}else if (patternUsername.test(username)){
						$("#help_username").text("用户名格式正确");
						$("#help_username").parent().removeClass("has-error").addClass("has-success");
						usernameInputOK = true;
					}else{
						$("#help_username").text("可使用汉字+数字+字母+下划线,2-10个字符");
						$("#help_username").parent().removeClass("has-success").addClass("has-error");
						usernameInputOK = false;
					}
				});

				//监听输入框内容变化
				$("#passwordInput").bind("input propertychange change blur", function(){
					var password = $("#passwordInput").val().trim();
					// console.log(patternPassword.test(password));
					if (password == "") {
						$("#help_password").text("密码不能为空");
						$("#help_password").parent().removeClass("has-success").addClass("has-error");
						passwordInputOK = false;
					}else if (patternPassword.test(password)){
						$("#help_password").text("密码格式正确");
						$("#help_password").parent().removeClass("has-error").addClass("has-success");
						passwordInputOK = true;
					}else{
						$("#help_password").text("可使用数字+字母+下划线,5-12个字符");
						$("#help_password").parent().removeClass("has-success").addClass("has-error");
						passwordInputOK = false;
					}
				});

				// 用户信息修改按钮
				$('#btn_userchange').on('click',function() {
					var changeUser_id = $("#changeUser_id").val().trim();
					var username = $("#usernameInput").val().trim();
					var password = $("#passwordInput").val().trim();
					if (!(usernameInputOK && passwordInputOK)) {
						console.log("表单验证未通过");
						if (!usernameInputOK){
							$("#usernameInput").focus().select();
						}else{
							$("#passwordInput").focus().select();
						}
						return false;
					}
					var form_changeUser = {
						id: changeUser_id,
						username: username,
						password: password
					}
					console.log(form_changeUser);
					$.ajax({
						url: 'account/updateUserInfo',
						type: "POST",
						data: form_changeUser,//传递数据直接将上面定义的表单写上，后面拼接要传递的参数名及参数
						dataType: 'json',
						success: function (msg) {
							console.log(msg);
							if (msg.resCode == 1) {
								alert(msg.resultMsg);
								window.location.href = "indexMain";
							} else {
								alert(msg.resultMsg);
								$("#help_username").text(msg.resultMsg);
								$("#help_username").parent().removeClass("has-success").addClass("has-error");
							}
						},
						error: function (e) {
							alert("错误：" + e);
						}
					});
				});

				/**
				 * 删除博客按钮
				 */
				$(".btn_deleteBlog").on('click',function () {
					var bid =  $(this).parent().parent().children(":first").children(":first").val().trim();
					var btitle =  $(this).parent().parent().children(":first").children().eq(1).text().trim();
					$('#deleteBlog_id').val(bid);
					$('#deleteBlog_title').text(btitle);
				});

				/**
				 * 删除博客模态框提交
				 */
				$('#btn_deleteBlog_save').on('click',function () {
					var deleteBlog_id = $("#deleteBlog_id").val();
					console.log("提交信息:"+deleteBlog_id);
					var form_deleteBlog = {
						id: deleteBlog_id
					}
					$.ajax({
						url: 'deleteBlog',
						type: "POST",
						data: form_deleteBlog,
						dataType: 'json',
						success: function (msg) {
							console.log(msg);
							if (msg.resCode == 1) {
								alert(msg.resultMsg);
								window.location.href = "userInfo";
							} else {
								alert(msg.resultMsg);
							}
						},
						error: function (e) {
							alert("错误：" + e);
						}
					});
				});


			})
		</script>

	</body>

</html>
